import React,{Component} from 'react';
import {Modal,Form,Input,Button} from 'antd';

const FormItem = Form.Item;
const MenuInfoForm = ({maskVisible,onCancel,item,onSubmit,form:{getFieldDecorator,
    validateFields,
    getFieldsValue,
    resetFields
}}) =>{
    const confirmLoading = false
    const formItemLayout = {
        labelCol: {
            xs: { span: 20 },
            sm: { span: 4 },
        },
        wrapperCol: {
            xs: { span: 20 },
            sm: { span: 16 },
        },
    }
    const handleOk = ()=>{
        validateFields((errors) => {
            if (errors) {
                return
            }
            const data = {
                ...getFieldsValue(),
            }
            onSubmit(data)
        })
    }
    return(
        <Form>
            <Modal title="菜单新增"
                   visible={maskVisible}
                   onCancel={onCancel}
                   onOk={handleOk}
                   footer={[
                       <Button key="back" onClick={onCancel}>取消</Button>,
                       <Button key="submit" type="primary" loading={confirmLoading} onClick={handleOk}>
                           提交
                       </Button>,
                   ]}
            >
                <FormItem label="父级菜单" {...formItemLayout}>
                    {
                        getFieldDecorator('parent_id',{
                            initialValue: item.parent_id,
                        })(<Input disabled={true}/>)
                    }
                </FormItem>
                <FormItem label="名称" {...formItemLayout}>
                    {
                        getFieldDecorator('title',{
                            initialValue: item.title,
                            rules:[{
                                required: true, message: '请输入名称', whitespace: true
                            }],
                        })(<Input />)
                    }
                </FormItem>
                <FormItem label="图标" {...formItemLayout}>
                    {
                        getFieldDecorator('icon',{
                            initialValue: item.icon,
                            rules:[{
                                required:true,message:'请输入icon',whitespace: true
                            }]
                        })(<Input />)
                    }
                </FormItem>
                <FormItem label="路由" {...formItemLayout}>
                    {
                        getFieldDecorator('route',{
                            initialValue: item.route,
                            rules:[{
                                required:true,message:'请输入路由地址',whitespace: true
                            }]
                        })(<Input />)
                    }
                </FormItem>
            </Modal>
        </Form>
    )
}
const MenuForm = Form.create({})(MenuInfoForm);
export default MenuForm;
